home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Menus / popit-menu.izs < prev    next >
Text File  |  2005-09-02  |  10KB  |  285 lines

  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Pop-it menu
  4. <!/TITLE>
  5.  
  6. <!BROWSER>NS6+ IE5+ Opera 7+<!/BROWSER>
  7.  
  8. <!DESCRIPTION> Pop-it allows you to associate a dynamic menu with regular links on your page. As the mouse moves over the link in question, a menu pops up containing "sub links". Think of it as a "loose" drop down menu.
  9.  
  10. This is a great script for expanding links on your page with a 2nd level. The menu intelligently re-positions itself depending on how close it is to the edge of the browser window, so it's always in full view.
  11.  
  12. <!/DESCRIPTION> 
  13.  
  14. <!CATEGORY>drop down menus<!/CATEGORY>
  15.  
  16. <!SCRIPT>
  17. <!-- START OF SCRIPT -->
  18. <!-- Step 1: Insert the following script into the <head> section of your page: -->
  19. <style type="text/css">
  20.  
  21. #popitmenu{
  22. position: absolute;
  23. background-color: white;
  24. border:1px solid black;
  25. font: normal 12px Verdana;
  26. line-height: 18px;
  27. z-index: 100;
  28. visibility: hidden;
  29. }
  30.  
  31. #popitmenu a{
  32. text-decoration: none;
  33. padding-left: 6px;
  34. color: black;
  35. display: block;
  36. }
  37.  
  38. #popitmenu a:hover{ /*hover background color*/
  39. background-color: #CCFF9D;
  40. }
  41.  
  42. </style>
  43.  
  44. <script type="text/javascript">
  45.  
  46. /***********************************************
  47. * Pop-it menu- ⌐ Dynamic Drive (www.dynamicdrive.com)
  48. * This notice MUST stay intact for legal use
  49. * Visit http://www.dynamicdrive.com/ for full source code
  50. ***********************************************/
  51.  
  52. var defaultMenuWidth="150px" //set default menu width.
  53.  
  54. var linkset=new Array()
  55. //SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT
  56.  
  57. linkset[0]='<a href="http://dynamicdrive.com">Dynamic Drive</a>'
  58. linkset[0]+='<hr>' //Optional Separator
  59. linkset[0]+='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
  60. linkset[0]+='<a href="http://www.codingforums.com">Coding Forums</a>'
  61. linkset[0]+='<a href="http://www.cssdrive.com">CSS Drive</a>'
  62. linkset[0]+='<a href="http://freewarejava.com">Freewarejava</a>'
  63.  
  64. linkset[1]='<a href="http://msnbc.com">MSNBC</a>'
  65. linkset[1]+='<a href="http://cnn.com">CNN</a>'
  66. linkset[1]+='<a href="http://news.bbc.co.uk">BBC News</a>'
  67. linkset[1]+='<a href="http://www.washingtonpost.com">Washington Post</a>'
  68.  
  69. ////No need to edit beyond here
  70.  
  71. var ie5=document.all && !window.opera
  72. var ns6=document.getElementById
  73.  
  74. if (ie5||ns6)
  75. document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')
  76.  
  77. function iecompattest(){
  78. return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
  79. }
  80.  
  81. function showmenu(e, which, optWidth){
  82. if (!document.all&&!document.getElementById)
  83. return
  84. clearhidemenu()
  85. menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
  86. menuobj.innerHTML=which
  87. menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
  88. menuobj.contentwidth=menuobj.offsetWidth
  89. menuobj.contentheight=menuobj.offsetHeight
  90. eventX=ie5? event.clientX : e.clientX
  91. eventY=ie5? event.clientY : e.clientY
  92. //Find out how close the mouse is to the corner of the window
  93. var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
  94. var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
  95. //if the horizontal distance isn't enough to accomodate the width of the context menu
  96. if (rightedge<menuobj.contentwidth)
  97. //move the horizontal position of the menu to the left by it's width
  98. menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
  99. else
  100. //position the horizontal position of the menu where the mouse was clicked
  101. menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
  102. //same concept with the vertical position
  103. if (bottomedge<menuobj.contentheight)
  104. menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
  105. else
  106. menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
  107. menuobj.style.visibility="visible"
  108. return false
  109. }
  110.  
  111. function contains_ns6(a, b) {
  112. //Determines if 1 element in contained in another- by Brainjar.com
  113. while (b.parentNode)
  114. if ((b = b.parentNode) == a)
  115. return true;
  116. return false;
  117. }
  118.  
  119. function hidemenu(){
  120. if (window.menuobj)
  121. menuobj.style.visibility="hidden"
  122. }
  123.  
  124. function dynamichide(e){
  125. if (ie5&&!menuobj.contains(e.toElement))
  126. hidemenu()
  127. else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
  128. hidemenu()
  129. }
  130.  
  131. function delayhidemenu(){
  132. delayhide=setTimeout("hidemenu()",500)
  133. }
  134.  
  135. function clearhidemenu(){
  136. if (window.delayhide)
  137. clearTimeout(delayhide)
  138. }
  139.  
  140. if (ie5||ns6)
  141. document.onclick=hidemenu
  142.  
  143. </script>
  144. <!-- Step 2: Add the below to the <body> of your page. It contains the HTML codes for the menu: -->
  145. <a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Webmaster Links</a><br>
  146. <a href="#" onMouseover="showmenu(event,linkset[1], '180px')" onMouseout="delayhidemenu()">News sites</a>
  147. <!-- END OF SCRIPT -->
  148. <!/SCRIPT>
  149.  
  150. <!PREVIEW>
  151. <!-- START OF SCRIPT -->
  152.  
  153. <!-- Step 1: Insert the following script into the <head> section of your page: -->
  154. <style type="text/css">
  155.  
  156. #popitmenu{
  157. position: absolute;
  158. background-color: white;
  159. border:1px solid black;
  160. font: normal 12px Verdana;
  161. line-height: 18px;
  162. z-index: 100;
  163. visibility: hidden;
  164. }
  165.  
  166. #popitmenu a{
  167. text-decoration: none;
  168. padding-left: 6px;
  169. color: black;
  170. display: block;
  171. }
  172.  
  173. #popitmenu a:hover{ /*hover background color*/
  174. background-color: #CCFF9D;
  175. }
  176.  
  177. </style>
  178.  
  179. <script type="text/javascript">
  180.  
  181. /***********************************************
  182. * Pop-it menu- ⌐ Dynamic Drive (www.dynamicdrive.com)
  183. * This notice MUST stay intact for legal use
  184. * Visit http://www.dynamicdrive.com/ for full source code
  185. ***********************************************/
  186.  
  187. var defaultMenuWidth="150px" //set default menu width.
  188.  
  189. var linkset=new Array()
  190. //SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT
  191.  
  192. linkset[0]='<a href="http://dynamicdrive.com">Dynamic Drive</a>'
  193. linkset[0]+='<hr>' //Optional Separator
  194. linkset[0]+='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
  195. linkset[0]+='<a href="http://www.codingforums.com">Coding Forums</a>'
  196. linkset[0]+='<a href="http://www.cssdrive.com">CSS Drive</a>'
  197. linkset[0]+='<a href="http://freewarejava.com">Freewarejava</a>'
  198.  
  199. linkset[1]='<a href="http://msnbc.com">MSNBC</a>'
  200. linkset[1]+='<a href="http://cnn.com">CNN</a>'
  201. linkset[1]+='<a href="http://news.bbc.co.uk">BBC News</a>'
  202. linkset[1]+='<a href="http://www.washingtonpost.com">Washington Post</a>'
  203.  
  204. ////No need to edit beyond here
  205.  
  206. var ie5=document.all && !window.opera
  207. var ns6=document.getElementById
  208.  
  209. if (ie5||ns6)
  210. document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')
  211.  
  212. function iecompattest(){
  213. return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
  214. }
  215.  
  216. function showmenu(e, which, optWidth){
  217. if (!document.all&&!document.getElementById)
  218. return
  219. clearhidemenu()
  220. menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
  221. menuobj.innerHTML=which
  222. menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
  223. menuobj.contentwidth=menuobj.offsetWidth
  224. menuobj.contentheight=menuobj.offsetHeight
  225. eventX=ie5? event.clientX : e.clientX
  226. eventY=ie5? event.clientY : e.clientY
  227. //Find out how close the mouse is to the corner of the window
  228. var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
  229. var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
  230. //if the horizontal distance isn't enough to accomodate the width of the context menu
  231. if (rightedge<menuobj.contentwidth)
  232. //move the horizontal position of the menu to the left by it's width
  233. menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
  234. else
  235. //position the horizontal position of the menu where the mouse was clicked
  236. menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
  237. //same concept with the vertical position
  238. if (bottomedge<menuobj.contentheight)
  239. menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
  240. else
  241. menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
  242. menuobj.style.visibility="visible"
  243. return false
  244. }
  245.  
  246. function contains_ns6(a, b) {
  247. //Determines if 1 element in contained in another- by Brainjar.com
  248. while (b.parentNode)
  249. if ((b = b.parentNode) == a)
  250. return true;
  251. return false;
  252. }
  253.  
  254. function hidemenu(){
  255. if (window.menuobj)
  256. menuobj.style.visibility="hidden"
  257. }
  258.  
  259. function dynamichide(e){
  260. if (ie5&&!menuobj.contains(e.toElement))
  261. hidemenu()
  262. else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
  263. hidemenu()
  264. }
  265.  
  266. function delayhidemenu(){
  267. delayhide=setTimeout("hidemenu()",500)
  268. }
  269.  
  270. function clearhidemenu(){
  271. if (window.delayhide)
  272. clearTimeout(delayhide)
  273. }
  274.  
  275. if (ie5||ns6)
  276. document.onclick=hidemenu
  277.  
  278. </script>
  279. <!-- Step 2: Add the below to the <body> of your page. It contains the HTML codes for the menu: -->
  280. <a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Webmaster Links</a><br>
  281. <a href="#" onMouseover="showmenu(event,linkset[1], '180px')" onMouseout="delayhidemenu()">News sites</a>
  282. <!-- END OF SCRIPT -->
  283. <!/PREVIEW>
  284.  
  285. <!RELATED>NONE<!/RELATED>